<template>
  <div class="l_login">
    <div class="l_login-container">
        <div class="l_login-img"><img src="../assets/images/login/l_01.png"></div>
        <!-- 表单 -->
        <div class="l_login-form">
            <div class="l_login-title">
                <h3>欢迎登陆，喵喵不易</h3>
            </div>
            <el-form label-width="0" :model="loginForm" :rules="loginFormRules" ref="loginObj">
                <!-- 用户名 -->
                <el-form-item class="l_login-item" prop="username">
                    <img src="../assets/images/login/l_02.png" alt="" class="l_login-pic">
                    <el-input class="l_login-inp" v-model="loginForm.username"></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item class="l_login-item" prop="password">
                    <img src="../assets/images/login/l_03.png" alt="" class="l_login-pic">
                    <el-input type="password" class="l_login-inp" v-model="loginForm.password"></el-input>
                </el-form-item>
                <!-- 登录 -->
                <el-form-item class="l_login-item">
                    <el-button type="primary" @click="loginFn" :plain="true">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
  </div>
</template>

<script>

import util from "../utils/request"

export default {
    name: 'login',
    data() {
        return {
            // 表单登录数据绑定
            loginForm: {
                username: 'admin',
                password: '123123'
            },
            // 表单验证规则
            loginFormRules: {
                username: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '密码不能少于三位数', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        loginFn() {
            var _this = this
            this.$refs.loginObj.validate(valid=>{
                if(!valid) return false;
                var sendObj = this.loginForm
                util.call_netA("post","/admin/auth/login",sendObj,function(data){
                    const res = data.data
                    console.log(res)
                    if(res.code == 200) {
                        _this.$message({
                            message: '登录成功！',
                            center: true,
                            type: 'success'
                        });
                        window.localStorage.setItem("token",res.data.token);
                        setTimeout(function(){
                            _this.$router.push('/home');
                        },2000)
                    }
                },function(err){},"")
            })
        }
    }
}
</script>

<style scoped>
.l_login{width: 100%; height: 100%; position: relative; overflow: hidden; background: #F6DD0D;}
.l_login-container{width: 1200px; height: 525px; margin: 0 auto; background-color: #fff; border-radius: 11px; padding: 25px 40px 25px 580px; position: relative; top: 50%; transform: translate(0,-50%); -webkit-transform: translate(0,-50%);display: flex;justify-content: space-between;}
.l_login-img{width: 500px;position: absolute;top: 50%;left: 40px;transform: translate(0,-50%);}
.l_login-img img{width: 100%;}
.l_login-form{width: 100%; position: relative; display: flex; flex-direction: column; justify-content: center;}
.l_login-title{color: #333; font-weight: 500; line-height: 1;}
.l_login-title h3{margin: 0 auto 60px; font-size: 42px; font-weight: 500; line-height: 50px;}
.l_login-item{position: relative;width: 100%;}
.l_login-inp{padding: 0 30px 0 20px; line-height: 36px; position: relative; font-size: 14px; background: #fff; border-bottom: 1px solid #eee; border-radius: 5px; color: #454545; margin-bottom: 15px;}
.l_login-form button{width: 100%; margin: 40px auto 0;}
.l_login-pic{width: 16px; height: 16px; position: absolute; top: 12px; left: 10px; z-index: 1;}
.l_login>>>.el-input__inner{border: none!important;}
.l_login-item.el-form-item{margin-bottom: 0!important;}

@media only all and (max-width:1200px){
    .l_login{padding: 0 25px; min-width: 992px;}
    .l_login-container{width: 100%;}
}

</style>